<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>第九单元</title>
        <style>
		    body {
				margin:0;
				padding:0;
				background:#f0f0f0;
			}
			#content {
				margin:0;
				padding:0;
				width:auto;
				float:left;
				background:white;
			}
			#codeText {
				float:right;
				width:32.5%;
				background:white;
			}
			h1 {
				margin:0;
				padding:0;
				width:150px;
				height:50px;
				cursor:pointer;
			}
			canvas {
				background:#f0f0ff;
			}
			ul {
				margin:0;
				padding:0;
				position:absolute;
				display:none;
			}
			ul li{
				margin:0;
				padding-left:20px;
				list-style:none;
				width:120px;
				height:30px;
				line-height:30px;
				cursor:pointer;
				border-bottom:1px solid rgba(0,0,0,0.2);
				border-right:1px solid rgba(0,0,0,0.2);
				background:rgb(255,255,255);
			}
			input {
				position:absolute;
				top:5px;
				width:300px;
				height:30px;
				left:200px;
			}
			#arrValue{
				position:absolute;
				top:10px;
				left:550px;
			}
        </style>
            
    </head>
    <body>
		<h1 id="selectButton">冒泡排序</h1>
		<input id="input">
		<span id="arrValue">[6,1,10,8,9,20,15,66,33,77]</span>
		<ul id='ul'>
			<li id='maopaoPai'>冒泡排序</li>
			<li id='guibingPai'>归并排序</li>
			<li id='shellSort' >希尔排序</li>
			<li id='insertionSort' >插入排序</li>
			<li id='selectionSort' >选择排序</li>
			<li id='kuaisuPai' >快速排序</li>
		</ul>
		<div id="content">
			<canvas id="canvas"></canvas>
		</div>
		<pre id="codeText"></pre>
		<script>
			var canvas = document.getElementById('canvas');
			var selectButton = document.getElementById('selectButton');
			var input = document.getElementById('input');
			var ul = document.getElementById('ul');
			selectButton.onclick = function(e){
				window.event? window.event.cancelBubble = true : e.stopPropagation();
				if(ul.style.display='none'){
					ul.style.display = 'block';
				}else{
					ul.style.display = 'none';
				}
				
			}
			document.body.onclick = function(e){
				window.event? window.event.cancelBubble = true : e.stopPropagation();
				if(ul.style.display='block'){
					ul.style.display = 'none';
				}
			}
			
			ul.onclick = function(e){
				currentPaixu = paixuObj[e.target.id].fn;
				currentText = paixuObj[e.target.id].fnText;
				selectButton.innerHTML = paixuObj[e.target.id].text;
				var myEvent = new Event('resize');
				window.dispatchEvent(myEvent);
			}
			var ctx = canvas.getContext('2d');
			var arr = [6,1,10,8,9,20,15,66,33,77];
			input.onchange = function(e){
				if(/^\s*\[\s*([1-9]\d*),([1-9]\d*,)*([1-9]\d*)\s*\]\s*$/.test(document.getElementById("input").value)){
					document.getElementById("arrValue").innerText = document.getElementById("input").value;
					arr = JSON.parse(document.getElementById("input").value)
					var myEvent = new Event('resize');
					window.dispatchEvent(myEvent);
				}else{
					document.getElementById("arrValue").innerHTML='<i style="color:red">输入数组不合法</i>'
				}
			}
			//设置canvas宽高
			
			var centerCount = 0;//中部动画计数
			var allCount = 0;//总进程记数
			(function(doc, win) { 
			var docEl = doc.documentElement;
			var touTextH = 50;//头部文字高度
			var touH = 0;//头部动画高度
			var jianGe = 1000;//大动画执行间隔 毫秒
			var weiH = 100;//尾部文字高度
			
			var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
				var recalc = function() {
				    if(window.resizeTimer){
						centerCount = 0;
						allCount = 0;
						for(var key in window.resizeTimer){
							if(window.resizeTimer[key] instanceof Object){
								for(var keys in window.resizeTimer[key]){
									clearInterval(window.resizeTimer[key][keys])
								}
							}
							clearInterval(window.resizeTimer[key])
						}
					}
					window.resizeTimer={}
					var clientWidth = docEl.clientWidth*2/3; 
					if (!clientWidth) return; 
					//console.log(clientWidth,'电脑端模拟')
					canvas.width = clientWidth; //画布宽
					canvas.height = docEl.clientHeight-touTextH;//画布高
					document.getElementById("codeText").style.height = docEl.clientHeight-touTextH+'px';//代码高
					document.getElementById("codeText").innerHTML = currentText;
					ctx.clearRect(0,touTextH,clientWidth,docEl.clientHeight-touTextH);//屏幕宽度改变清空画布
					var dataArrAll = returnRectArrAll(0,touTextH,clientWidth,docEl.clientHeight-touTextH,touH,weiH,arr);				
					//绘制首页
					phFirst(dataArrAll[0],'rgba(0,0,255,1)',ctx);
					var guidStr = guid()
					var startTime = null;
					var endTime = null;
					//console.log(dataArrAll)
					/*
					for(var i = 0;i < dataArrAll.length-1;i++){
						console.log(equalTwoCavasArr(dataArrAll[i],dataArrAll[i+1]));
					}
					
					phChaYi(dataArrAll[0],dataArrAll[1],jianGe,'rgba(0,0,0,0.9)',ctx);
					*/
					
					window.resizeTimer[guidStr]=setInterval(function(){
						if(centerCount==0){
							//console.log(allCount)
							phChaYi(dataArrAll[allCount],dataArrAll[allCount+1],jianGe,'rgba(0,0,0,0.9)',ctx);
							allCount++;
							startTime=new Date().getTime();
							console.log('00000000000000000000')
							if(allCount==dataArrAll.length-1){
									window.clearInterval(window.resizeTimer[guidStr])
								}
						}
						if(centerCount==4){
						    endTime = new Date().getTime();
							console.log(endTime-startTime>jianGe)
							if(endTime-startTime>3*jianGe){
								console.log('中部一圈了');
								centerCount=0;
								if(allCount==dataArrAll.length-1){
									window.clearInterval(window.resizeTimer[guidStr])
								}
							}
						}
						
					},20)
					
				}; 
				if (!doc.addEventListener) return; 
				win.addEventListener(resizeEvt, recalc, false); 
				doc.addEventListener('DOMContentLoaded', recalc, false); 
			})(document, window)
			function returnRectArrAll(x,y,w,h,touH,weiH,arr){
				if(!w || !h || !arr || arr.length==0 || panduanChunshuzi(arr)){
					console.log('传入phRectArrAll函数的参数不正确');
				}else{
					var firstArr = copyShendu(arr);
					var shuziArr = returnIdArr(arr)
					//console.log(shuziArr)
					var newDataArr = sort(copyShendu(shuziArr));
					newDataArr.unshift(shuziArr);
					var newArr = [];
					for(var j = 0;j < newDataArr.length;j++){
						newArr.push(returnDataArr(newDataArr[j],x,y,w,h,touH,weiH))
					}
					return newArr;
					
				}
			}
			//测试数组元素是否是纯数字
			function panduanChunshuzi(arr){
				var flag = true;
				for(var i = 0;i < arr.length;i++){
					if(/\d+/.test(arr[i])){
						flag=false;
					}else{
						flag = true;
					}
				}
				return flag;
			}
			//将纯数字数组转化为含id数组
			function returnIdArr(arr){
			    var newArr = [];
				for(var i = 0;i < arr.length;i++){
					newArr.push({
						value:arr[i],
						id:guid(),
						index:i
					})
				}
				return newArr
			}
			//用于生成uuid
			function S4() {
				return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
			}
			function guid() {
				return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
			}
			//求纯数字数组最大值
			function returnMaxOfArr(arr){
				var num = 0;
				for(var i = 0;i < arr.length;i++){
					if(arr[i].value>num){
						num=arr[i].value
					}
				}
				return num;
			}
			//根据有Id的数组求出坐标长宽数据数组
			/*画布起点横轴 画布起点纵轴 画布宽 画布高 头部动画高，尾部动画高*/
			function returnDataArr(arr,x,y,w,h,touH,weiH){
				//矩形间隔
				var juxingjiange = Math.round((w*1/(arr.length+1))/(arr.length-1));
				//矩形高的单位
				var juxinggaodanwei = Math.round((h-touH-weiH)/returnMaxOfArr(arr));
				//矩形的宽
				var juxingdekuan = Math.round(w/(arr.length+1));
				var newArr = [];
				for(var i = 0;i < arr.length;i++){
					if(i==0){
						newArr.push({
							x:x,
							y:y,
							w:juxingdekuan,
							h:arr[i].value*juxinggaodanwei,
							value:arr[i].value,
							id:arr[i].id,
							index:arr[i].index
						})
					}else{
						newArr.push({
							x:i*juxingdekuan+juxingjiange*i,
							y:y,
							w:juxingdekuan,
							h:arr[i].value*juxinggaodanwei,
							value:arr[i].value,
							id:arr[i].id,
							index:arr[i].index
						})
					}
					
				}
				return newArr
				
			}
			function phRectSmall(obj,color,ctx){
				//console.log(obj)
				ctx.save();
				ctx.beginPath();
				ctx.rect(obj.x,obj.y,obj.w,obj.h);
				ctx.fillStyle = color;
				ctx.font = (obj.w/3 > 50?50:obj.w/3) +"px bold 黑体"
				ctx.fillText(obj.value+'',obj.x+obj.w/3,50-(obj.w/4 > 10?10:obj.w/4));
				ctx.fill();
				ctx.closePath();
				ctx.restore();
			}
			//排序算法
			function sort(elements){
				var newArr = []
				//maoPaoPai(elements,newArr);
				//kuaisuPai(elements,newArr);
				//selectionSort(elements,newArr);
				//insertionSort(elements,newArr);
				//shellSort(elements,newArr);
				currentPaixu(elements,newArr)
				for(var i = 1;i < newArr.length;i++){
					//console.log(equalTwoCavasArr(newArr[i-1],newArr[i]))
				}
				return newArr;
			}
			var paixuObj = {
				maopaoPai:{
					text:'冒泡排序',
					fn:function maoPaoPai(elements,newArr){ //冒泡排序
						for(var i = 0;i < elements.length-1;i++)
						{
							for(var j = 0;j < elements.length-1-i;j++){
								
								if(elements[j].value > elements[j+1].value){
									var swap = elements[j];
									elements[j] = elements[j+1];
									elements[j+1] = swap;
								}
								newArr.push(copyArr(elements))
							}
						}
					},
					fnText:`function bubbleSort(array) {
	const length = array.length;
	for (let i = 0; i < length; i++) {
		for (let j = 0; j < length - 1 - i; j++) {
			if (array[j] > array[j + 1]) {      
		   let temp = array[j + 1];
				array[j + 1] = array[j];
				array[j] = temp;
			}
		}
	}
	return array;
}`
				},
				guibingPai:{
					text:'归并排序',
					fn:function(array,newnewArr){ //归并排序
						function mergeSort(array,str,shengyu) {
							if (array.length < 2) {
								return array;
							}
							const middle = parseInt(array.length / 2);
							const left = array.slice(0, middle);
							const right = array.slice(middle);
							return merge(mergeSort(left,'left',right.concat(shengyu)), mergeSort(right,'right',shengyu.concat(left)),str,shengyu);
						}
						function merge(left, right,str,shengyu) {
							
							const newArray = [];
							while (left.length && right.length) {
								if (left[0].value <= right[0].value) {
									newArray.push(left.shift());
								} else {
									newArray.push(right.shift());
								}
							}
							while (left.length) {
								newArray.push(left.shift());
							}
							while (right.length) {
								newArray.push(right.shift());
							}
							//console.log(newArray,shengyu,str,'000000000')
							if(!str){
								newnewArr.push(newArray)
							}else if(str=='left'){
								newnewArr.push(newArray.concat(shengyu))
							}else{
								newnewArr.push(shengyu.concat(newArray))
							}
							return newArray;
						}
						mergeSort(array,'',[])
					
					},
					fnText:`function mergeSort(array) {
	if (array.length < 2) {
		return array;
	}
	const middle = parseInt(array.length / 2);
	const left = array.slice(0, middle);
	const right = array.slice(middle);
	return merge(test_run(left), test_run(right));
}
function merge(left, right) {
	const newArray = [];
	while (left.length && right.length) {
		if (left[0] <= right[0]) {
			newArray.push(left.shift());
		} else {
			newArray.push(right.shift());
		}
	}
	while (left.length) {
		newArray.push(left.shift());
	}
	while (right.length) {
		newArray.push(right.shift());
	}
	return newArray;
}`
				},
				shellSort:{
					text:'希尔排序',
					fn:function(arr,newArr) { //希尔排序
						var gap=Math.floor(arr.length/2);       
						while(gap>0){
							for(var i=gap;i<arr.length;i++){
								var temp=arr[i];
								var j=i-gap;
									while(j>=0&&arr[j].value>temp.value){
										arr[j+gap]=arr[j];
										arr[j]=temp;
										j-=gap;
										//console.log(arr.length)
										newArr.push(copyShendu(arr));
									}
								arr[j+gap]=temp;
							}
							gap=Math.floor(gap/2); 
						}
						return arr;

					},
					fnText:`function shellSort(array) {
	let gap = 1;
	while (gap < array.length / 5) {
		gap = gap * 5 + 1;
	}
	for (gap; gap > 0; parseInt(gap / 5)) {
		for (let i = gap; i < array.length; i++) {
			const temp = array[i];
			for (let j = i - gap; j >= 0 && array[j] > temp; j -= gap) {
				array[j + gap] = array[j];
			}
			array[j + gap] = temp;
		}
	}
	return array;
}`
				},
				insertionSort:{
					text:'插入排序',
					fn:function(array,newArr) { //插入排序
						for (let i = 1; i < array.length; i++) {
							let key = array[i];
							let j = i - 1;
							while (j >= 0 && array[j].value > key.value) {
								array[j + 1] = array[j];
								j--;
							}
							array[j + 1] = key;
							newArr.push(copyShendu(array));
						}
						
						return array;
					},
					fnText:`function insertionSort(array) {
	for (let i = 1; i < array.length; i++) {
		let key = array[i];
		let j = i - 1;
		while (j >= 0 && array[j] > key) {
			array[j + 1] = array[j];
			j--;
		}
		array[j + 1] = key;
	}
	return array;
}`
				},
				selectionSort:{
					text:'选择排序',
					fn:function(array,newArr) { //选择排序
						let length = array.length;
						for (let i = 0; i < length - 1; i++) {
							let minIndex = i;
							for (let j = i + 1; j < length; j++) {
								if (array[j].value < array[minIndex].value) {
									minIndex = j;
								}
							}
							let temp = array[i];
							array[i] = array[minIndex];
							array[minIndex] = temp;
							newArr.push(copyShendu(array))
						}
						return array;
					},
					fnText:`function selectionSort(array) {
	let length = array.length;
	for (let i = 0; i < length - 1; i++) {
		let minIndex = i;
		for (let j = i + 1; j < length; j++) {
			if (array[j] < array[minIndex]) {
				minIndex = j;
			}
		}
		let temp = array[i];
		array[i] = array[minIndex];
		array[minIndex] = temp;
	}
	return array;
}`
				},
				kuaisuPai:{
					text:'快速排序',
					fn:function(elements,newArr){ //快速排序
						function quickSort(array,arrayAll) {
							var copyArr = arrayAll;
							var start = 0;
							if (array.length <= 1) {
								
								return array;
							}else{
								//求取部分数组的开头和结尾
								for(var m = 0;m < copyArr.length;m++){
									if(array[0].id == copyArr[m].id){
										start = m;
									}
								}
							}
							const pivotIndex = parseInt(array.length / 2);
							const pivot = array.splice(pivotIndex, 1);
							const left = [];    const right = [];
							for (let i = 0; i < array.length; i++) {
								if (array[i].value < pivot[0].value) {
									left.push(array[i]);
								} else {
									right.push(array[i]);
								}
							}
							var spliceArr = left.concat(pivot,right);
							for(var k = 0;k < spliceArr.length;k++){
								copyArr.splice(start+k,1,spliceArr[k]);
							}
							newArr.push(copyShendu(copyArr));
							
							return quickSort(left,copyArr).concat(pivot, quickSort(right,copyArr));
						}
						quickSort(elements,copyShendu(elements))
						return newArr;
					},
					fnText:`const quickSort = function (array) {
	if (array.length <= 1) {
		return array;
	}
	const pivotIndex = parseInt(array.length / 2);
	const pivot = Number(array.splice(pivotIndex, 1));
	const left = [];    const right = [];
	for (let i = 0; i < array.length; i++) {
		if (array[i] < pivot) {
			left.push(array[i]);
		} else {
			right.push(array[i]);
		}
	}
	return quickSort(left).concat([pivot], quickSort(right));
};`
				}
			};
			var currentPaixu = paixuObj.maopaoPai.fn;//当前排序方法
			var currentText = paixuObj.maopaoPai.fnText;//当前排序方法代码
			
			//复制数组
			function copyArr(arr){
				var newArr = [];
				for(var i = 0;i < arr.length;i++){
					var obj = {}
					for(var key in arr[i]){
						obj[key] = arr[i][key]
					}
					newArr.push(obj)
				}
				return newArr;
			}
			//绘制首页
			function phFirst(arr,color,ctx){
				for(var i = 0;i < arr.length;i++){
					phRectSmall(arr[i],color,ctx)
				}
			}
			//绘制差异页
			function phChaYi(arr1,arr2,jianGe,color,ctx){
				var chayi = equalTwoCavasArr(arr1,arr2);
				//console.log(chayi)
				if(fenxi1(chayi)<0){
					//两数组无差异，不绘制
				}else{
					//获取差异项索引
					var suoyinarr = fenxi1(chayi);
					//获取非差异索引
					var feiChaYiSuoYin = [];
					for(var i = 0;i < chayi.length;i++){
						if(suoyinarr.indexOf(i)<0){
							feiChaYiSuoYin.push(i)
						}
					}
					//获取对应数量的随机色
					var colorArr = returnColor(suoyinarr.length);
					//获取对应数量的起止点坐标数据
					var startEndArr = returnStartEnd(arr1,arr2,suoyinarr)
					//将颜色数据合如坐标数组
					colorConcatStartEnd(colorArr,startEndArr)
					var guidStr = guid()
					window.resizeTimer[guidStr]={count:0}
					window.centerCount=1;
					window.resizeTimer[guidStr].timer = setInterval(function(){
					    switch(true){
							case window.centerCount==1:
								if(window.resizeTimer[guidStr].count==0){
									window.resizeTimer[guidStr].count=1
									//绘制向下的动作
									phBottom(startEndArr,jianGe,ctx,feiChaYiSuoYin,arr2);
									
								}
								break;
							case window.centerCount==2:
								if(window.resizeTimer[guidStr].count==1){
									window.resizeTimer[guidStr].count=2
									//绘制偏移动画
									phMove(startEndArr,jianGe,ctx,feiChaYiSuoYin,arr2);
									
								}
								break;
							case window.centerCount==3:
								if(window.resizeTimer[guidStr].count==2){
									window.resizeTimer[guidStr].count=0
									//绘制上浮动画
									phUp(startEndArr,jianGe,ctx,feiChaYiSuoYin,arr2)
								}
								
								break;
							default:
							    
								window.clearInterval(window.resizeTimer[guidStr]?window.resizeTimer[guidStr].timer:'');
								delete window.resizeTimer[guidStr];
							
						}
						console.log(window.centerCount)
					},16);
					
				}
				
			}
			//绘制向下动作
			function phBottom(startEndArr,jiange,ctx,feiChaYiSuoYin,arr2){
				var guidStr = guid()
				window.resizeTimer[guidStr]={count:0}
				var buArr = [];
				for(var i = 0;i < startEndArr.length;i++){
					buArr.push(5);
				}
				window.resizeTimer[guidStr].timer = setInterval(function(){
					if(window.resizeTimer[guidStr].count==10){
						window.clearInterval(window.resizeTimer[guidStr].timer);
						window.resizeTimer[guidStr]=null;
						delete window.resizeTimer[guidStr];
						window.centerCount = window.centerCount+1;
					}else{
						window.resizeTimer[guidStr].count = window.resizeTimer[guidStr].count+1
						ctx.clearRect(
							0,0,1900,1900
						)
						for(var k = 0;k < arr2.length;k++){
							if(feiChaYiSuoYin.indexOf(k)>=0){
								phRectSmall(arr2[k],'rgba(0,0,255,0.8)',ctx)
							}
						}
						for(var m = 0;m < startEndArr.length;m++){
							startEndArr[m].start.y = startEndArr[m].start.y+buArr[m];
							phRectSmall(startEndArr[m].start,startEndArr[m].start.color,ctx)
						}
					}
				},jiange/10)
			}
			//绘制偏移动画
			function phMove(startEndArr,jiange,ctx,feiChaYiSuoYin,arr2){
				var guidStr = guid()
				window.resizeTimer[guidStr]={count:0}
				var buArr = []
				for(var i = 0;i < startEndArr.length;i++){
					buArr.push((startEndArr[i].end.x-startEndArr[i].start.x)/10);
				}
					window.resizeTimer[guidStr].timer = setInterval(function(){
						if(window.resizeTimer[guidStr].count==10){
							window.clearInterval(window.resizeTimer[guidStr].timer);
							window.resizeTimer[guidStr]=null;
							delete window.resizeTimer[guidStr];
							window.centerCount = window.centerCount+1;
						}else{
							window.resizeTimer[guidStr].count = window.resizeTimer[guidStr].count+1
							ctx.clearRect(
								0,0,1900,1900
							)
							for(var k = 0;k < arr2.length;k++){
								if(feiChaYiSuoYin.indexOf(k)>=0){
									phRectSmall(arr2[k],'rgba(0,0,255,0.8)',ctx)
								}
							}
							
							for(var m = 0;m < startEndArr.length;m++){
								startEndArr[m].start.x = startEndArr[m].start.x+buArr[m];
								phRectSmall(startEndArr[m].start,startEndArr[m].start.color,ctx)
							}
						}
					},jiange/10)
			
			}
			//绘制上浮动作
			function phUp(startEndArr,jiange,ctx,feiChaYiSuoYin,arr2){
				var guidStr = guid()
				window.resizeTimer[guidStr]={count:0}
				var buArr = [];
				for(var i = 0;i < startEndArr.length;i++){
					buArr.push(-5);
				}
				window.resizeTimer[guidStr].timer = setInterval(function(){
					if(window.resizeTimer[guidStr].count==10){
						window.clearInterval(window.resizeTimer[guidStr].timer);
						window.resizeTimer[guidStr]=null;
						delete window.resizeTimer[guidStr];
						window.centerCount = window.centerCount+1;
					}else{
						window.resizeTimer[guidStr].count = window.resizeTimer[guidStr].count+1
						ctx.clearRect(
							0,0,1900,1900
						)
						for(var k = 0;k < arr2.length;k++){
							if(feiChaYiSuoYin.indexOf(k)>=0){
								phRectSmall(arr2[k],'rgba(0,0,255,0.8)',ctx)
							}
						}
						for(var m = 0;m < startEndArr.length;m++){
							startEndArr[m].start.y = startEndArr[m].start.y+buArr[m];
							phRectSmall(startEndArr[m].start,startEndArr[m].start.color,ctx)
						}
					}
				},jiange/10)
			}
			//将颜色数组合如起始点数组
			function colorConcatStartEnd(color,startEnd){
				for(var i = 0;i < startEnd.length;i++){
					startEnd[i].start.color = color[i];
					startEnd[i].end.color = color[i];
				}
			}
			//返回起始点终点数组
			function returnStartEnd(arr1,arr2,suoyinarr){
				var startEndArr = [];
				for(var i = 0;i < suoyinarr.length;i++){
					startEndArr.push({
						start:arr1[suoyinarr[i]],
						end:returnIdElement(arr2,arr1[suoyinarr[i]].id)
					})
				}
				return startEndArr;
			}
			//返回对应id的元素
			function returnIdElement(arr,id){
				for(var i = 0;i < arr.length;i++){
					if(arr[i].id == id){
						return arr[i]
					}
				}
			
			}
			//返回对应数量的颜色
			function returnColor(num){
				var arr = [];
				for(var i = 0;i < num;i++){
					arr.push('rgba('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+',1)')
				}
				return arr;
			}
			//两个canvas数据数组比较
			function equalTwoCavasArr(arr1,arr2){
			    var newArr = [];
				for(var i = 0;i < arr1.length;i++){
					//console.log(arr1[i].id,arr2[i].id)
					if(arr1[i].id==arr2[i].id){
						//相同为0
						newArr.push(0);
					}else{
						newArr.push(1);
					}
				}
				return newArr;
			}
			//判断数组中是否有1，如果有返回1的索引数组，否则返回-1;
			function fenxi1(arr){
				var newArr = [];
				for(var i = 0;i < arr.length;i++){
					if(arr[i]==1){
						newArr.push(i)
					}
				}
				if(newArr.length!=0)return newArr;
				return -1;
			}
			//清除计时器
			function clearIntervalFn(obj){
				for(var key in obj){
					clearInterval(key)
				}
			}
			//深度克隆
			function copyShendu(obj){
				var newObj = obj instanceof Array ? []:{};
				for(var key in obj){
					if(typeof obj[key] != 'object'){
						newObj[key]=obj[key];
					}else{
						newObj[key]=copyShendu(obj[key])
					}
					
				}
				return newObj;
			}
        </script>   
    </body>
</html>